<extend name="Public/common"/>
<block name="othercss">
    <style>
        #createImg {
            z-index: 999;
            /*position: fixed;*/
        }
        #shareImg {
            z-index: 6;
            opacity: 0;
            /*position: absolute;*/
            top: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
        body{
            background:rgb(218,51,68);
        }
        .div_bg{
            background-image:url(__PUBLIC__/phone/images/3-image.png);
            background-size:333px 535px;
            width:333px;
            height: 535px;
            margin:auto;
            margin-top: 34px;
        }
        .a_btn{
            background:rgb(209,0,21);
            line-height: 37px;
            color:#FFF;width: 100%;
            border-radius: 5px;
            text-align: center;
            font-size: 18px;
            margin-top: 30px;
        }
        .url_icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #F8F8F8;
            height: 148px;
        }
        .url_a {
            width: 100%;
            text-align: center;
            line-height: 53px;
            font-size: 16px;
            color: #616161;
        }
        .url_icon ul li {
            float: left;
            width: 25%;
            text-align: center;
        }
        .url_icon-icon{
            width:61px;
            height:61px;
        }
        .url_icon  p{
            margin-top: 14px;
            font-size:14px;
            color:#616161;
        }
    </style>
</block>
<block name="header">
    <div class="header">
        <div class="clearfix box">
            <a class="return" href="/Phone/Extension/profitIndex"><i class="return-icon"></i></a>
            <h2>邀请好友</h2>
        </div>
    </div>
</block>
<block name="body">
    <div id="app" style="background:rgb(218,51,68)">
        <div class="container 75pt" id="del">
            <div  class="div_bg">
                <div style="padding-top: 49px;text-align: center;font-size:16px;">您的邀请码</div>

                <!-- 当前邀请码 -->
                <div style="margin-top: 31px;text-align: center;font-size:21px;"><span id="biao1">{$code}</span></div>
                <div style="margin-top: 20px;text-align: center;font-size:16px;color:rgb(209,0,21);margin-bottom: 25px;" onclick="copyUrl2()">复制邀请码</div>
                <div style="padding:0 50px;">
                    <div style="border-bottom:1px  dashed rgb(181,181,181)"></div>
                </div>

                <div style="text-align: center;margin-top:30px;margin-bottom: 25px;">
                    <img src="{:U('getShareCode')}">
                </div>


                <div id="createImg" style="text-align: center;font-size:16px;color:rgb(209,0,21)" data-html2canvas-ignore @click="generateImage">生成图片</div>
                <div style="text-align: center;font-size:16px;color:rgb(38,38,38);margin-top:10px;">邀请好友开通代理可获赠{$money}元现金红包</div>
                <div style="padding: 0 20px;" id="share">
                    <a href="#" onclick="showmodel()" class="a_btn">立即分享</a>
                </div>

                <div class="bdsharebuttonbox" data-tag="share_1" hidden>
                    <a class="bds_sqq" data-cmd="sqq" id="qq_share"></a>
                    <a class="bds_tsina" data-cmd="tsina" id="tsina_share"></a>
                    <a class="bds_weixin" data-cmd="weixin" id="weixin_share"></a>
                </div>
            </div>
        </div>

        <div id="shareImg"></div>
    </div>
</block>

<block name="footer">
    <div id="showmodel" style="display: none">
        <!--上层内容-->
        <div class="url_icon">
            <ul>
                <li>
                    <a onclick="weixin_share()">
                        <image  class="url_icon-icon" src="__PUBLIC__/phone/images/wx2.png"></image>
                        <p>分享微信</p>
                    </a>
                </li>
                <li>
                    <a onclick="qq_share()">
                        <image  class="url_icon-icon" src="__PUBLIC__/phone/images/qq2.png"></image>
                        <p>分享QQ</p>
                    </a>
                </li>
                <li>
                    <a onclick="copyUrl()">
                        <image  class="url_icon-icon" src="__PUBLIC__/phone/images/lj2.png"></image>
                        <p>复制链接</p>
                    </a>
                </li>
                <li>
                    <a onclick="tsina_share()">
                        <image  class="url_icon-icon" src="__PUBLIC__/phone/images/wb2.png"></image>
                        <p>分享微博</p>
                    </a>
                </li>
            </ul>
        </div>

        <a class="url_a" onclick="clert()">取消</a>
    </div>
</block>
<block name="otherjs">
    <script src="/Public/common/myHtml/js/flexible.js"></script>
    <script src="/Public/common/myHtml/js/html2canvas.js"></script>
    <script src="/Public/common/myHtml/js/vue-2.4.2.min.js"></script>
    <script type="text/javascript">
        let index = '';
        let share_url = 'http://'+ document.domain +"{$good['ex_share_img']}";
        function showmodel() {
            index = layer.open({
                type: 1,
                title: false,
                content: $('#showmodel'),
                offset: 'rb',
                area: ['100%', '201px'],
            })
        }
        function copyUrl2()
        {
            var Url2=document.getElementById("biao1").innerText;
            var oInput = document.createElement('input');
            oInput.value = Url2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            layer.msg('复制成功');
        }
        function copyUrl()
        {
            layer.close(index);
            var oInput = document.createElement('input');
            oInput.value = "{$code_url}";
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            layer.msg('复制成功');
        }
        function qq_share() {
            layer.close(index);
            document.getElementById('qq_share').click();
        }
        function tsina_share() {
            layer.close(index);
            document.getElementById('tsina_share').click();
        }
        function weixin_share() {
            layer.close(index);
            document.getElementById('weixin_share').click();
        }
        function clert() {
            layer.close(index)
        }

        window._bd_share_config = {
            common : {
                bdText : "{$ex_share_info}",
                bdDesc : '',
                bdUrl : "{$code_url}",
                bdPic : share_url,
            },
            share : [{
                "bdSize" : 16
            }],

            image : [{
                viewType : 'list',
                viewPos : 'top',
                viewColor : 'black',
                viewSize : '16',
                viewList : ['qzone','tsina','huaban','tqq','renren']
            }],
            selectShare : [{
                "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
            }]
        }
        with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    </script>


    <script>
        var vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    afterCanvasImageHide: true,
                    showToast: false,
                    avatar: ''
                };
            },
            mounted: function() {
                this.$nextTick(function() {
                    var _this = this;
                    // 用base64展示html中要显示的图片（如果这个图片地址是服务端链接，图片链接需要服务端允许跨域，本地图片可以不用转base64）
                    // 因为直接使用服务端地址链接，canvas.toDataUrl API抛出异常：
                    // Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. ==> 受污染的画布不能导出
                    var imgUrl1 = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKVkoe7Viae4lreoZBybEywysxHlnlqplGTbaJLQI7pV8W5KMFK1DqBrNntO5O9wT0YYP9cgP6m4dA/132';
                    _this.img2base64(imgUrl1, 'Anonymous').then(function(res) {
                        _this.avatar = res;
                    });
                });
            },
            methods: {
                /**
                 * 根据 window.devicePixelRatio 获取像素比
                 * @returns {number}
                 * @constructor
                 */
                getDpr: function() {
                    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                        return window.devicePixelRatio;
                    }
                    return 1;
                },

                /**
                 * 将传入值转为整数
                 * @param value
                 * @returns {number}
                 */
                parseValue: function(value) {
                    return parseInt(value, 10);
                },

                // 将图片转为base64格式
                img2base64: function(url, crossOrigin) {
                    return new Promise(resolve => {
                        const img = new Image();
                        img.onload = () => {
                            const c = document.createElement('canvas');

                            c.width = img.naturalWidth;
                            c.height = img.naturalHeight;

                            const cxt = c.getContext('2d');
                            cxt.drawImage(img, 0, 0);
                            // 得到图片的base64编码数据
                            resolve(c.toDataURL('image/png'));
                        };
                        // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
                        crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
                        img.src = url;
                    });
                },

                /**
                 * 生成图片
                 */
                generateImage: function() {
                    document.getElementById('createImg').innerText = '长按保存图片';
                    document.getElementById('shareImg').setAttribute('style', 'position: absolute');
                    document.getElementById('share').remove();

                    var _this = this;

                    // 获取想要转换的dom节点
                    // var dom = document.querySelector('body');
                    var dom = document.getElementById('app');
                    var box = window.getComputedStyle(dom);

                    // dom节点计算后宽高
                    var width = _this.parseValue(box.width);
                    var height = _this.parseValue(box.height);

                    // 获取像素比
                    var scaleBy = _this.getDpr();

                    // 创建自定义的canvas元素
                    var canvas = document.createElement('canvas');

                    // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
                    canvas.width = width * scaleBy;
                    canvas.height = height * scaleBy;

                    // 设置canvas css 宽高为DOM节点宽高
                    canvas.style.width = width + 'px';
                    canvas.style.height = height + 'px';

                    // 获取画笔
                    var context = canvas.getContext('2d');

                    // 将所有绘制内容放大像素比倍
                    context.scale(scaleBy, scaleBy);

                    // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
                    var w = document.getElementById('app').style.width;
                    var h = document.getElementById('app').style.height;

                    html2canvas(dom, {
                        allowTaint: true,
                        width: w,
                        height: h,
                        useCORS: true
                    }).then(function(canvas) {
                        // 将canvas转换成图片渲染到页面上
                        var url = canvas.toDataURL('image/png');// base64数据
                        var image = new Image();
                        image.src = url;

                        document.getElementById('shareImg').appendChild(image);

                        _this.afterCanvasImageHide = false;

                        _this.showToast = true;
                        setTimeout(function() {
                            _this.showToast = false;
                        }, 1000);
                    });
                }
            }
        });
    </script>
</block>